<template>
  <div>
    <Header />
    <div>
      <!-- 顶部轮播 -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="./zhenxin.jpg" alt="" /></div>
          <div class="swiper-slide"><img src="./zhapian.jpg" alt="" /></div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
      <!-- 中间内容 -->
      <div class="center-content">
        <div class="leftBox">
          <div class="leftBox-top">
            <div @click="gotolink">
              <img src="./yanjing.png" alt="" />
              <p class="text"><span>999+人</span>刚刚看过我</p>
            </div>
            <div>
              <img src="./xiaoren.png" alt="" />
              <p class="text"><span>999+人</span>未读消息</p>
            </div>
            <div>
              <img src="./mail.png" alt="" />
              <p class="text"><span>999+人</span>关注我</p>
            </div>
          </div>
          <div class="leftBox-bottom">
            <div class="l-select">点击修改择偶条件之后的下拉列表</div>
            <div class="l-titile">
              <span class="title">每日推荐</span>
              <span>22-23岁的女士</span>
              <span class="choose">修改择偶条件</span>
            </div>
            <div class="l-contetn">
              <!-- 遍历 -->
              <div class="l-contetn-card" @click="myLoveToDetail(user.objectID)" v-for="user in userList" :key="user.objectID">
                <img :src="user.avatarURL" alt="" />
                <div>
                  <div class="information">
                    <span class="nickname">{{user.nickname}}</span>
                    <div class="icon">
                      <span style="color: gold" class="iconfont iconhuangguanguanjun2x"></span>
                      <span style="color: green" class="iconfont iconcredentials_icon"></span>
                    </div>
                  </div>
                  <!-- <span  v-for="(it,index) in user.basicInfo" :key="index">{{it}}{{index === user.basicInfo.length - 1 ? '' : '|'}}</span> -->
                  <p class="age">25岁 | 深圳 | 160cm | 运营管理</p>
                  <p class="detailed">
                    {{user.introduceContent}}
                  </p>
                  <span class="say">
                    <img src="./sayhi.31f29f1.png" alt="" />
                    打招呼
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="rightBox" v-if="userData.info">
          <div class="card">
            <div class="card-message" @click="$router.push('/personal')" >
              <img :src="userData.info.imgUrl" alt="" />
              <div class="message-text">
                <p class="message_Name">{{userData.info.userName}}</p>
                <div>
                  <span class="iconfont iconhuangguanguanjun2x"></span>
                  <span class="iconfont iconxing1"></span>
                  <span class="iconfont iconidCard"></span>
                </div>
                <p class="message_id">ID:1128017825</p>
              </div>
            </div>
            <div class="card-extend">
              <div>
                <p class="">0</p>
                <p>照片<span>上传</span></p>
              </div>
              <div>
                <p>999</p>
                <p>真爱币<span>充值</span></p>
              </div>
            </div>
          </div>
          <div class="service">
            <div class="text">珍爱服务</div>
            <div>
              <div class="service-item">
                <img src="./zhenxin.67ffa14.png" alt="" />
                <div class="service-item-more">
                  <p class="change">珍心会员</p>
                  <p>解锁收信/发信，更多精准筛选条件</p>
                </div>
              </div>
              <div class="service-item">
                <img src="./star.a6da2b1.png" alt="" />
                <div class="service-item-more">
                  <p class="change">星级特权</p>
                  <p>查看谁赞了我，谁关注我，搜索排名优先，更多展示机会</p>
                </div>
              </div>
              <div class="service-item">
                <img src="./coin.d20a1c9.png" alt="" />
                <div class="service-item-more">
                  <p class="change">珍爱币</p>
                  <p>珍爱网专用虚拟货币，可以购买各种自助服务！</p>
                </div>
              </div>
              <div class="service-item">
                <img src="./zhiying.b5112b6.png" alt="" />
                <div class="service-item-more">
                  <p class="change">直营门店</p>
                  <p>优质精选会员，红娘服务一对一，五步服务，六重保障！</p>
                </div>
              </div>
            </div>
          </div>
          <div class="media">
            <div class="media-title">媒体节目</div>
            <div class="media-banner">
              <div>
                <div><img src="./program-1.d27b3e8.png" alt="" /></div>
                <p>新相亲时代招募嘉宾</p>
              </div>
            </div>
          </div>
          <div class="call-num">
            <div class="call-tiele">珍爱相关</div>
            <div class="call-phone">
              <p>珍爱红娘如果联系您，会使用如下号码：</p>
              <div>北京：010-52050520</div>
              <div>深圳：0755-26613636</div>
              <div>厦门：0592-5896333</div>
            </div>
          </div>
          <div class="more">
            <div class="more-tiele">珍爱应用</div>
            <div class="more-map">
              <div>
                <img src="./map.c1ce975.png" alt="" />
              </div>
              <div @click="$router.push('/map')">
                <p class="p-one">地图搜索</p>
                <p class="p-two">找到身边的ta</p>
              </div>
            </div>
          </div>
          <div class="photo"></div>
          <div class="live">点击查看直播</div>
        </div>
      </div>
      <!-- 底部内容 -->
      <div class="center-bottom">
        <div class="search">
          想查看更多符合你条件的用户？尝试一下搜索吧
          <button>点击前往搜索</button>
        </div>
      </div>
    </div>
    <Footer v-if="!$route.meta.isHideFooter" />
  </div>
</template>

<script>
import Swiper from "swiper";
import "../../../node_modules/swiper/css/swiper.min.css";
import { mapState, mapActions } from 'vuex'

export default {

  name: "myZhenai",
  data() {
    return {
      userData:{},
      toLink: [
        "https://www.zhenai.com/n/message/_visit",
        "https://www.zhenai.com/n/message?from=myzhenai",
        "https://www.zhenai.com/n/message/_follow",
      ],
      userList: {}
    };
  },
  methods: {
    ...mapActions(['getConditionList']),
    gotolink() {
      console.log('跳跳虎');
    },

    // 跳转到用户详情
    myLoveToDetail(userId) {
      console.log(userId);
      this.$router.history.push({
        name: 'Detail',
        query: {
          userId
        }
      })
    }
  },
  mounted() {
    new Swiper(".swiper-container", {
      cssMode: true,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      pagination: {
        el: ".swiper-pagination",
      },
      loop: true, // 无缝轮播
      autoplay: {
        delay: 1000, // 自动轮播的时间
        // stopOnLastSlide: false, // 最后一张不停止自动轮播
        disableOnInteraction: true, // 鼠标移入时停止自动轮播
      },
    });
    this.userData = JSON.parse(window.localStorage.getItem("cookie"))
    // 请求数据
    this.getConditionList(0)
  },
  computed: {
    ...mapState({
      conditionList: (state) => state.search.conditionList,
    }),
  },
  watch: {
    // 监视数据，以来就复制一份，用于以后点击搜索的时候使用
    conditionList() {

      // 上来先获取三十条数据
      this.userList = this.conditionList.list.slice(0, 20)
    }
  },



}
</script>

<style lang="stylus" scoped>
.swiper-container
  width 1200px
  height 100%
  padding 100px 0 0 0
  margin 0px auto
  .swiper-slide
    text-align center
    font-size 18px
    background #fff
.center-content
  width 1200px
  margin 20px auto 0
  display flex
  justify-content space-around
.center-content .leftBox
  width 880px
.center-content .leftBox .leftBox-top
  width 100%
  height 140px
  background white
  border-radius 6px
  border 1px solid #EBEBEB
  display flex
  justify-content space-around
.center-content .leftBox .leftBox-top div
  display flex
  flex-direction column
  align-items center
  cursor pointer
  width 290px
.center-content .leftBox .leftBox-top img
  vertical-align bottom
  width 70px
.center-content .leftBox .leftBox-top .text
  font-size 16px
  font-weight 400
  lineheight 30px
  letter-spacing 1px
.center-content .leftBox .leftBox-top .text span
  color #FF7351
.center-content .leftBox .leftBox-bottom
  background #fff
  margin-top 20px
.center-content .leftBox .leftBox-bottom .l-titile
  background-color #FAFAFA
  height 42px
  font-size 16px
  font-weight 400
  color #666
  line-height 42px
  letter-spacing 1
  display flex
.center-content .leftBox .leftBox-bottom .l-titile .title
  lineheight 20px
  color #333
  margin-right 20px
.center-content .leftBox .leftBox-bottom .l-titile .choose
  margin-left auto
  margin-right 20px
  color #8b76f9
  cursor pointer
.center-content .leftBox .leftBox-bottom .l-contetn
  width 882px
  border 1px solid #EBEBEB
  border-radius 6px
  display flex
  flex-wrap wrap
.center-content .leftBox .leftBox-bottom .l-contetn .l-contetn-card
  display flex
  cursor pointer
  width 440px
  height 194px
.center-content .leftBox .leftBox-bottom .l-contetn .l-contetn-card .information
  display flex
.center-content .leftBox .leftBox-bottom .l-contetn .l-contetn-card img
  width 150px
  height 150px
  margin-right 12px
.center-content .leftBox .leftBox-bottom .l-contetn .l-contetn-card .age
  height 1.1em
  max-width 16em
  overflow hidden
  text-overflow ellipsis
  display box
  display -webkit-box
  -webkit-line-clamp 1
  -webkit-box-orient vertical
  font-weight 500
  color #666666
  line-height 17px
  margin-bottom 16px
.center-content .leftBox .leftBox-bottom .l-contetn .l-contetn-card .detailed
  width 230px
  height 34px
  font-size 14px
  font-weight 400
  color #666666
  line-height 17px
  overflow hidden
  text-overflow ellipsis
  display box
  display -webkit-box
  -webkit-line-clamp 2
  -webkit-box-orient vertical
  margin-bottom 12px
.center-content .leftBox .leftBox-bottom .l-contetn .l-contetn-card .say
  display flex
  justify-content center
  align-items center
  cursor pointer
  width 200px
  height 36px
  border-radius 4px
  border 1px solid #AC94FC
  font-size 14px
  font-weight 500
  color #ab94fc
  line-height 36px
  padding-left 10px
.center-content .leftBox .leftBox-bottom .l-contetn .l-contetn-card .say img
  width 20px
  height 18px
.center-content .leftBox .leftBox-bottom .l-contetn .l-contetn-card .nickname
  font-size 16px
  font-weight 600
  color #666666
  line-height 22px
  margin-bottom 10px
  margin-top 4px
.center-content .leftBox .leftBox-bottom .l-contetn .l-contetn-card .icon
  margin-top 7px
  margin-left 3px
.center-content .rightBox
  width 290px
  border 1px solid #EBEBEB
.center-content .rightBox .card
  width 290px
  height 200px
  background #fff
  border-radius 6px
.center-content .rightBox .card .card-message
  display flex
.center-content .rightBox .card .card-message img
  cursor pointer
  margin-top 20px
  margin-left 20px
  width 100px
  height 100px
.center-content .rightBox .card .card-message .message-text
  display flex
  flex-wrap wrap
  width 142px
  margin-left 10px
  margin-top 24px
.center-content .rightBox .card .card-message .message-text p
  max-width 5em
  cursor pointer
  overflow hidden
  white-space nowrap
  margin-right 5px
  font-size 16px
  font-weight 600
  color #333
  line-height 22px
.center-content .rightBox .card .card-extend
  display flex
  justify-content space-around
  margin-top 20px
  font-size 13px
  font-weight 500
  color #999999
  line-height 18px
.center-content .rightBox .card .card-extend div
  text-align center
.center-content .rightBox .card .card-extend span
  cursor pointer
  font-size 12px
  color #8b76f9
  line-height 17px
  margin-left 2px
.center-content .rightBox .service
  margin-top 20px
  width 290px
  background white
  border-radius 6px
  border 1px solid #EBEBEB
.center-content .rightBox .service .text
  font-weight 600
  margin 20px 0 10px 20px
  font-size 20px
.center-content .rightBox .service .service-item
  display flex
  font-size 12px
  font-family PingFangSC-Medium
  font-weight 500
  color #666666
  line-height 17px
  margin-top 20px
  padding-bottom 16px
  height 68px
.center-content .rightBox .service .service-item img
  cursor pointer
  width 50px
  height 50px
  margin-left 28px
  margin-right 20px
.center-content .rightBox .service .service-item .service-item-more
  width 168px
.center-content .rightBox .service .service-item .service-item-more .change
  cursor pointer
  font-size 14px
  font-family PingFangSC-Semibold
  font-weight 600
  color #333333
  line-height 20px
  &:hover
    color #ab94fc
.center-content .rightBox .media
  margin-top 20px
  width 290px
  background white
  border-radius 6px
  border 1px solid #EBEBEB
.center-content .rightBox .media .media-title
  font-size 20px
  font-weight 600
  padding 20px 0 14px 20px
.center-content .rightBox .media .media-banner
  cursor pointer
  width 250px
  margin 12px 20px 8px 20px
.center-content .rightBox .media .media-banner img
  border-radius 6px
.center-content .rightBox .media .media-banner p
  margin-top 8px
  margin-bottom 25px
  font-size 14px
  font-weight 400
  color #333333
  line-height 20px
.center-content .rightBox .call-num
  margin-top 20px
  width 290px
  background white
  border-radius 6px
  border 1px solid #EBEBEB
.center-content .rightBox .call-num .call-tiele
  font-size 20px
  font-weight 600
  padding 20px 0 14px 20px
.center-content .rightBox .call-num .call-phone
  padding 14px 16px 18px 20px
  font-size 14px
  font-weight 400
  color #333333
  line-height 20px
.center-content .rightBox .call-num .call-phone p
  margin-bottom 12px
.center-content .rightBox .more
  margin-top 20px
  width 290px
  background white
  border-radius 6px
  border 1px solid #EBEBEB
.center-content .rightBox .more .more-tiele
  font-size 20px
  font-weight 600
  padding 20px 0 14px 20px
.center-content .rightBox .more .more-map
  display flex
.center-content .rightBox .more .more-map img
  cursor pointer
  width 30px
  height 45px
  margin 25px 23px 24px 28px
.center-content .rightBox .more .more-map .p-one
  font-size 16px
  cursor pointer
  margin-top 24px
  font-weight 600
  color #333333
  &:hover
    color #ab94fc
.center-content .rightBox .more .more-map .p-two
  font-size 16px
  font-weight 500
  color #666666
  line-height 20px
.center-content .rightBox .photo
  cursor pointer
  margin-top 20px
  width 290px
  height 160px
  border-radius 6px
  background url('security.8e9e788.jpg') no-repeat
  background-size 100% 100%
.center-content .rightBox .live
  width 290px
  height 36px
  margin-top 22px
  border-radius 4px
  color #fff
  font-weight bold
  line-height 36px
  font-size 14px
  text-align center
  background #8B76F9
  cursor pointer
.center-bottom
  width 1200px
  margin 40px auto 74px
.center-bottom .search
  height 90px
  background white
  border-radius 6px
  border 1px solid #EBEBEB
  font-size 20px
  font-weight 400
  color #333333
  line-height 90px
  letter-spacing 1px
  padding-left 312px
.center-bottom .search button
  background linear-gradient(
    -135deg,
    #856df1,
    #a468ef
  )
  font-size 20px
  width 162px
  margin 27px 312px 27px 46px
  cursor pointer
  border-radius 4px
  user-select none
  font-size 14px
  cursor pointer
.message_Name,
.message_id
  overflow hidden
  white-space nowrap
  text-overflow ellipsis
</style>

    
   